<!-- 提现列表 -->
<template>
	<view class="page pages">
		<view class="title">
			<view>{{$t('withdrawals.withdrawalsList.Time')}}</view>
			<view>{{$t('withdrawals.withdrawalsList.Money')}}</view>
			<view>{{$t('withdrawals.withdrawalsList.State')}}</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view>{{item.time_str}}</view>
				<view>{{item.price}}</view>
				<view>{{item.status_str}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userWithdrawalList } from '@/api/api.js'
	export default {
		data() {
			return {
				page: 1,
				list: []
			};
		},
		onReachBottom(){
			this.page++
			this.userWithdrawalList()
	    },
		onShow() {
			this.page = 1
			this.list = []
			this.userWithdrawalList()
			uni.setNavigationBarTitle({
				title: this.$t('list.tList')
			})
		},
		methods: {
			userWithdrawalList(){
				userWithdrawalList({
					token: uni.getStorageSync('token'),
					page: this.page
				}).then(res=>{
					if(res.data.data.data.length > 0){
						this.list = [...this.list, ...res.data.data.data]
					}else{
						this.page--;
						uni.showToast({
							title: this.$t('withdrawals.withdrawalsList.noMore'),
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	padding: 20rpx;
	box-sizing: border-box;
}
.title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ccc;
	height: 110rpx;
	border-radius: 20rpx 20rpx 0 0;
	font-size: 36rpx;
	&>view{
		width: 33%;
		text-align: center;
	}
}
.list{
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 95rpx;
		&>view{
			width: 33%;
			text-align: center;
		}
	}
	.item:nth-child(2n){
		background-color: #eee;
	}
}
</style>
